<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<button @click="add">添加学生</button>
			<button @click="del">删除学生</button>
			<table>
			<tr>
				<th>班级</th>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
			</tr>
			<tr align="center" v-for="s in students">
				<td>{{s.grade}}</td>
				<td>{{s.name}}</td>
				<td>{{s.sex}}</td>
				<td>{{s.age}}</td>
			</tr>	
			</table>
			
		</div>
		<script>
			var vm=new Vue({
				el:"#app",
				data:{
					students:[
						{grade:'1',name:'李四',sex:'男',age:18},
						{grade:'2',name:'罗雪',sex:'女',age:18}
					]
				},
				methods:{
					add(){
						var st={grade:'3',name:'王五',sex:'男',age:18}
						this.students.push(st)
					},
					del(){
						// 删除学生信息
						// pop是从下往上删除。shift是从上往下删除
						this.students.pop()
						this.students.shift()
					}
				}
			})
		</script>
	</body>
</html>